<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-upload
        class="upload-demo"
        action="http://113.118.193.85:17088/file/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
         multiple
        :limit="3"
        :on-exceed="handleExceed"
        :data= "userList"
        :on-success = "this.getFileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <!-- <div slot="tip" class="el-upload__tip">可以上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
    </div>
    <div>
      <el-table
        :data="fileList"
        style="width: 100%">

       <el-table-column type = "index" label="#" prop=""></el-table-column>
       <el-table-column label="文件名" prop="fileName"></el-table-column>
        <el-table-column label="文件大小" prop="size"></el-table-column>
       <el-table-column label="上传人" >
         <template>
           <span>{{name}}</span>
         </template>
       </el-table-column>
       <el-table-column label="上传时间" prop="createDate"></el-table-column>


      <el-table-column label="操作" width="210">
        <template slot-scope="scope">

           <el-tooltip class="item" effect="dark" content="删除文件" placement="top" :enterable = "false">
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              class="el-icon-delete"
              size="mini"
              @click="removeFileById(scope.row.id)"
            ></el-button>
          </el-tooltip>
          </template>
      </el-table-column>

      </el-table>



        <!-- 文件列表分页区域 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.page"
      :page-size="queryInfo.size"
      layout="total, prev, pager, next, jumper"
      :total="total">
      </el-pagination>


    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie';
export default {
  data() {
    return {
        //获取用户列表参数对象
      queryInfo:
      {
        userId:JSON.parse(Cookies.get('userId')).id,
        //当前的页数
        page:'1',
        //显示多少数量
        size:'5'
      },
       fileList:[

       ],
      total:0,
      tableData:[{test:'123456'},{test:'123'}],
      formlist: {

      },
       userList:
 {
// userId: Cookies.get('userId'),
           userId : JSON.parse(Cookies.get('userId')).id,


},
      deleteFile:{
        id:''
     },
    };
  },
   //页面创建期间就会调用这个函数
  created()
  {
    this.getFileList()
    // console.log(JSON.parse(Cookies.get('userId')).id)

  },
  computed:{
    name(){
      return JSON.parse(Cookies.get('userId')).username
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    async getFileList()
    {
      const {data: res} = await this.$http.get('http://113.118.193.85:17088/file/fileList',{ params: this.queryInfo });
      if(res.status !== 200)
      {
         return this.$message.error('获取文件列表失败');
      }
      this.fileList = res.data.list;
      this.total = res.data.total;
    },
   //监听 pagesize改变的事件
    handleSizeChange(newSize)
    {
      this.queryInfo.size = newSize;
      this.getFileList();
    },
    //监听 页码值改变的事件
    handleCurrentChange(newPage)
    {
      this.queryInfo.page = newPage;
       this.getFileList();
    },

     //根据Id删除对应的文件信息
     async removeFileById(id)
     {

      this.deleteFile.id = id;
      //弹框提示
      const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
      ).catch(err => {
        return err;
      })
      if(confirmResult !== 'confirm')
      {
        return this.$message.info('已经取消删除')
      }

      const {data : res} = await this.$http.post('http://113.118.193.85:17088/file/deleteFile',this.deleteFile);

      if(res.status !== 200)
      {
        return this.$message.error('删除文件失败')
      }

      this.$message.success('删除文件成功！')
      this.getFileList();
     },
  }
}
</script>

<style>

</style>
